<template>
    <div>
        <!-- 返回按钮区域 -->
       <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
           <div class="iconfont header-abs-icon">&#xe624;</div>
       </router-link>
       <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
           景点详情
            <router-link tag="div" to="/">
                <div class="iconfont header-fixed-back">&#xe624;</div>
            </router-link>
       </div>
    </div>
</template>

<script>
export default {
    name:'DetailHeader',
    data() {
        return {
           showAbs: true,
           opacityStyle: {
               opacity: 0
           }
        }
    },
    methods: {
        handleScroll() {
            // console.log('scroll'); //事件绑定到了全局的对象上
            // console.log(document.documentElement.scrollTop); //滚动距离
            const top = document.documentElement.scrollTop;
            if(top>60){
                this.showAbs = false;
                let opacity = top/140;
                opacity = opacity>1 ? 1:opacity;
                this.opacityStyle = {
                    // opacity: opacity
                    opacity
                }
            }else{
                this.showAbs = true;
            }
        }
    },
    created() {
        window.addEventListener('scroll',this.handleScroll);
    },
    activated() { //激活keep-alive,监听滚动
        window.addEventListener('scroll',this.handleScroll);
    },
    deactivated() { //当页面被替换成新的页面的时候移除事件
        window.removeEventListener('scroll',this.handleScroll)
    },
    destroyed() {
        window.removeEventListener('scroll',this.handleScroll)
    },
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .header-abs
        position: absolute
        left: .2rem
        top: .2rem
        width: .8rem
        height: .8rem
        line-height: .8rem
        border-radius: .4rem
        background: rgba(0,0,0,.8)
        text-align: center
        .header-abs-icon
            color: #fff
            font-size: .4rem
    .header-fixed
        position: fixed
        z-index: 2
        top: 0
        left:0
        right:0
        height: $headerHeight
        line-height: $headerHeight
        text-align: center
        color: #fff
        background: $bgColor
        font-size: .32rem
        .header-fixed-back
            position: absolute
            top: 0
            left: 0
            width: .64rem
            text-align:center
            font-size: .4rem
</style>